<template>
  <div>

    <el-dialog title="上级组织" v-model="dialogPIdFormVisible" width="40%">
      <div id="areaTreeDept">
        <div class="tree-box">
          <div class="zTreeDemoBackground left">
            <ul id="treeSysDeptSelect" class="ztree"></ul>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>

</template>

<script>
  import $ from 'jquery'
  import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'
  import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
  import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'
  import {getReq, postReq, putReq} from "../../../utils/api"
    export default {

      mounted(){

      },

        name: "SysMenuEdit",
      data(){
          return{


            defaultProps: {
              children: 'children',
              label: 'label'
            },

            dialogPIdFormVisible: false,
            zNodes:[],
            setting:{
              view: {
                showLine: false,
                selectedMulti: false
              },
              check:{
                enable: false,
                chkboxType: { 'Y': 'ps', 'N': 'ps' }
              },
              data:{
                simpleData:{
                  enable: true,
                  idKey: "id",
                  pIdKey: "pid"
                }
              },
              callback:{
                onClick:this.zTreeOnClick
              }
            }

          }
      },
      methods:{

          open(){
            this.dialogPIdFormVisible=true;
            this._listParent()
          },

        _pNameChange(data){
            this.formObj.pid=data;
        },

        _listParent(){
          postReq('/api/sys_dept/list',{}).then(res=>{
                this.zNodes=res.data.data
            $.fn.zTree.init($("#treeSysDeptSelect"), this.setting, this.zNodes)
          })
        },
          zTreeOnClick(event, treeId, treeNode) {
             this.$emit('on-result-change',{id:treeNode.id,name:treeNode.name})
              this.dialogPIdFormVisible = false
         },
      },
    }
</script>

<style scoped>

</style>
